<template>
    <!-- 对话框表单 -->
    <!-- 建议使用 Prettier 格式化代码 -->
    <!-- el-form 内可以混用 el-form-item、FormItem、ba-input 等输入组件 -->
    <el-dialog
        class="ba-operate-dialog"
        :close-on-click-modal="false"
        :model-value="['Add', 'Edit'].includes(baTable.form.operate!)"
        @close="baTable.toggleForm"
        width="50%"
    >
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ baTable.form.operate ? t(baTable.form.operate) : '' }}
            </div>
        </template>
        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
            <div
                class="ba-operate-form"
                :class="'ba-' + baTable.form.operate + '-form'"
                :style="config.layout.shrink ? '':'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
            >
                <el-form
                    v-if="!baTable.form.loading"
                    ref="formRef"
                    @submit.prevent=""
                    @keyup.enter="baTable.onSubmit(formRef)"
                    :model="baTable.form.items"
                    :label-position="config.layout.shrink ? 'top' : 'right'"
                    :label-width="baTable.form.labelWidth + 'px'"
                    :rules="rules"
                >
                    <FormItem :label="t('order.user_id')" type="remoteSelect" v-model="baTable.form.items!.user_id" prop="user_id" :input-attr="{ pk: 'xxz_user.id', field: 'nickname', 'remote-url': '/admin/user.User/index' }" :placeholder="t('Please select field', { field: t('order.user_id') })" />
                    <FormItem :label="t('order.order_type')" type="radio" v-model="baTable.form.items!.order_type" prop="order_type" :data="{ content: { '1': t('order.order_type 1'), '2': t('order.order_type 2') } }" :placeholder="t('Please select field', { field: t('order.order_type') })" />
                    <FormItem :label="t('order.order_no')" type="string" v-model="baTable.form.items!.order_no" prop="order_no" :placeholder="t('Please input field', { field: t('order.order_no') })" />
                    <FormItem :label="t('order.pay_order_no')" type="string" v-model="baTable.form.items!.pay_order_no" prop="pay_order_no" :placeholder="t('Please input field', { field: t('order.pay_order_no') })" />
                    <FormItem :label="t('order.send_style')" type="number" v-model="baTable.form.items!.send_style" prop="send_style" :data="{ content: { '1': t('order.send_style 1'), '2': t('order.send_style 2') } }" :placeholder="t('Please input field', { field: t('order.send_style') })" />
                    <FormItem :label="t('order.order_money')" type="number" prop="order_money" :input-attr="{ step: 1 }" v-model.number="baTable.form.items!.order_money" :placeholder="t('Please input field', { field: t('order.order_money') })" />
                    <FormItem :label="t('order.goods_money')" type="number" prop="goods_money" :input-attr="{ step: 1 }" v-model.number="baTable.form.items!.goods_money" :placeholder="t('Please input field', { field: t('order.goods_money') })" />
                    <FormItem :label="t('order.pay_price')" type="number" prop="pay_price" :input-attr="{ step: 1 }" v-model.number="baTable.form.items!.pay_price" :placeholder="t('Please input field', { field: t('order.pay_price') })" />
                    <FormItem :label="t('order.cash_pay')" type="number" prop="cash_pay" :input-attr="{ step: 1 }" v-model.number="baTable.form.items!.cash_pay" :placeholder="t('Please input field', { field: t('order.cash_pay') })" />
                    <FormItem :label="t('order.before_pay')" type="number" prop="before_pay" :input-attr="{ step: 1 }" v-model.number="baTable.form.items!.before_pay" :placeholder="t('Please input field', { field: t('order.before_pay') })" />
                    <FormItem :label="t('order.pay_freight_money')" type="number" prop="pay_freight_money" :input-attr="{ step: 1 }" v-model.number="baTable.form.items!.pay_freight_money" :placeholder="t('Please input field', { field: t('order.pay_freight_money') })" />
                    <FormItem :label="t('order.vip_money')" type="number" prop="vip_money" :input-attr="{ step: 1 }" v-model.number="baTable.form.items!.vip_money" :placeholder="t('Please input field', { field: t('order.vip_money') })" />
                    <FormItem :label="t('order.pay_time')" type="number" prop="pay_time" :input-attr="{ step: 1 }" v-model.number="baTable.form.items!.pay_time" :placeholder="t('Please input field', { field: t('order.pay_time') })" />
                    <FormItem :label="t('order.name')" type="string" v-model="baTable.form.items!.name" prop="name" :placeholder="t('Please input field', { field: t('order.name') })" />
                    <FormItem :label="t('order.mobile')" type="string" v-model="baTable.form.items!.mobile" prop="mobile" :placeholder="t('Please input field', { field: t('order.mobile') })" />
                    <FormItem :label="t('order.province')" type="string" v-model="baTable.form.items!.province" prop="province" :placeholder="t('Please input field', { field: t('order.province') })" />
                    <FormItem :label="t('order.city')" type="city" v-model="baTable.form.items!.city" prop="city" :placeholder="t('Please select field', { field: t('order.city') })" />
                    <FormItem :label="t('order.area')" type="string" v-model="baTable.form.items!.area" prop="area" :placeholder="t('Please input field', { field: t('order.area') })" />
                    <FormItem :label="t('order.address')" type="string" v-model="baTable.form.items!.address" prop="address" :placeholder="t('Please input field', { field: t('order.address') })" />
                    <FormItem :label="t('order.carry_code')" type="string" v-model="baTable.form.items!.carry_code" prop="carry_code" :placeholder="t('Please input field', { field: t('order.carry_code') })" />
                    <FormItem :label="t('order.write_name')" type="string" v-model="baTable.form.items!.write_name" prop="write_name" :placeholder="t('Please input field', { field: t('order.write_name') })" />
                    <FormItem :label="t('order.user_remarks')" type="string" v-model="baTable.form.items!.user_remarks" prop="user_remarks" :placeholder="t('Please input field', { field: t('order.user_remarks') })" />
                    <FormItem :label="t('order.pay_type')" type="string" v-model="baTable.form.items!.pay_type" prop="pay_type" :data="{ content: { '1': t('order.pay_type 1'), '2': t('order.pay_type 2'), '3': t('order.pay_type 3'), '9': t('order.pay_type 9') } }" :placeholder="t('Please input field', { field: t('order.pay_type') })" />
                    <FormItem :label="t('order.order_status')" type="radio" v-model="baTable.form.items!.order_status" prop="order_status" :data="{ content: { '1': t('order.order_status 1'), '10': t('order.order_status 10'), '15': t('order.order_status 15'), '20': t('order.order_status 20'), '25': t('order.order_status 25'), '30': t('order.order_status 30'), '40': t('order.order_status 40'), '60': t('order.order_status 60') } }" :placeholder="t('Please select field', { field: t('order.order_status') })" />
                    <FormItem :label="t('order.old_order_status')" type="radio" v-model="baTable.form.items!.old_order_status" prop="old_order_status" :data="{ content: {} }" :placeholder="t('Please select field', { field: t('order.old_order_status') })" />
                    <FormItem :label="t('order.pay_status')" type="radio" v-model="baTable.form.items!.pay_status" prop="pay_status" :data="{ content: { '1': t('order.pay_status 1'), '2': t('order.pay_status 2') } }" :placeholder="t('Please select field', { field: t('order.pay_status') })" />
                    <FormItem :label="t('order.cancel_time')" type="number" prop="cancel_time" :input-attr="{ step: 1 }" v-model.number="baTable.form.items!.cancel_time" :placeholder="t('Please input field', { field: t('order.cancel_time') })" />
                    <FormItem :label="t('order.deliver_time')" type="number" prop="deliver_time" :input-attr="{ step: 1 }" v-model.number="baTable.form.items!.deliver_time" :placeholder="t('Please input field', { field: t('order.deliver_time') })" />
                    <FormItem :label="t('order.receive_time')" type="number" prop="receive_time" :input-attr="{ step: 1 }" v-model.number="baTable.form.items!.receive_time" :placeholder="t('Please input field', { field: t('order.receive_time') })" />
                    <FormItem :label="t('order.express_code')" type="string" v-model="baTable.form.items!.express_code" prop="express_code" :placeholder="t('Please input field', { field: t('order.express_code') })" />
                    <FormItem :label="t('order.express_name')" type="string" v-model="baTable.form.items!.express_name" prop="express_name" :placeholder="t('Please input field', { field: t('order.express_name') })" />
                    <FormItem :label="t('order.express_no')" type="string" v-model="baTable.form.items!.express_no" prop="express_no" :placeholder="t('Please input field', { field: t('order.express_no') })" />
                    <FormItem :label="t('order.express_data')" type="select" v-model="baTable.form.items!.express_data" prop="express_data" :data="{ content: {} }" :placeholder="t('Please select field', { field: t('order.express_data') })" />
                    <FormItem :label="t('order.over_time')" type="number" prop="over_time" :input-attr="{ step: 1 }" v-model.number="baTable.form.items!.over_time" :placeholder="t('Please input field', { field: t('order.over_time') })" />
                    <FormItem :label="t('order.user_del_time')" type="number" prop="user_del_time" :input-attr="{ step: 1 }" v-model.number="baTable.form.items!.user_del_time" :placeholder="t('Please input field', { field: t('order.user_del_time') })" />
                </el-form>
            </div>
        </el-scrollbar>
        <template #footer>
            <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
                <el-button @click="baTable.toggleForm()">{{ t('Cancel') }}</el-button>
                <el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)" type="primary">
                    {{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? t('Save and edit next item') : t('Save') }}
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance, FormItemRule } from 'element-plus'
import { inject, reactive, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import FormItem from '/@/components/formItem/index.vue'
import { useConfig } from '/@/stores/config'
import type baTableClass from '/@/utils/baTable'
import { buildValidatorData } from '/@/utils/validate'

const config = useConfig()
const formRef = ref<FormInstance>()
const baTable = inject('baTable') as baTableClass

const { t } = useI18n()

const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    send_style: [buildValidatorData({ name: 'number', title: t('order.send_style') })],
    order_money: [buildValidatorData({ name: 'number', title: t('order.order_money') })],
    goods_money: [buildValidatorData({ name: 'number', title: t('order.goods_money') })],
    pay_price: [buildValidatorData({ name: 'number', title: t('order.pay_price') })],
    cash_pay: [buildValidatorData({ name: 'number', title: t('order.cash_pay') })],
    before_pay: [buildValidatorData({ name: 'number', title: t('order.before_pay') })],
    pay_freight_money: [buildValidatorData({ name: 'number', title: t('order.pay_freight_money') })],
    vip_money: [buildValidatorData({ name: 'number', title: t('order.vip_money') })],
    pay_time: [buildValidatorData({ name: 'number', title: t('order.pay_time') })],
    create_time: [buildValidatorData({ name: 'date', title: t('order.create_time') })],
    cancel_time: [buildValidatorData({ name: 'number', title: t('order.cancel_time') })],
    deliver_time: [buildValidatorData({ name: 'number', title: t('order.deliver_time') })],
    receive_time: [buildValidatorData({ name: 'number', title: t('order.receive_time') })],
    over_time: [buildValidatorData({ name: 'number', title: t('order.over_time') })],
    user_del_time: [buildValidatorData({ name: 'number', title: t('order.user_del_time') })],
    update_time: [buildValidatorData({ name: 'date', title: t('order.update_time') })],
})
</script>

<style scoped lang="scss"></style>
